<template>
  <div class="find-contain">
    <!-- 头部导航 -->
    <van-nav-bar>
      <template #title>
        <h3>发现</h3>
      </template>
    </van-nav-bar>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <!-- 面试技巧 -->
      <div class="skill">
        <!-- 抽取findcell组件 -->
        <findCell title="面试技巧"></findCell>
        <!-- 技巧列表 -->
        <div class="list">
          <skillList
            :item="item"
            v-for="(item, index) in skillList"
            :key="index"
          ></skillList>
        </div>
      </div>
      <!-- 市场数据 -->
      <div class="data">
        <findCell title="市场数据" @more="$router.push('/market')"></findCell>
        <!-- 小标题 -->
        <div class="tags">
          <div class="tag">{{ city }}</div>
          <div class="tag">{{ position }}</div>
        </div>
        <!-- 数据列表  -->
        <div class="data-list">
          <div class="item" v-for="(item, index) in showList" :key="index">
            <div class="left">
              {{ item.year.substr(0, 5) }}
            </div>
            <div class="center">
              <div
                class="content"
                :style="{
                  width: Math.round((item.salary / topSalary) * 100) + '%'
                }"
              >
                $ {{ item.salary }}
              </div>
            </div>
            <div class="right">
              <div v-if="item.percent">
                <i
                  v-if="item.percent < 0"
                  style="color: red;"
                  class="iconfont iconicon_xiajiang"
                ></i>
                <i
                  v-else
                  style="color: green;"
                  class="iconfont iconicon_shangsheng"
                ></i>
                {{ Math.abs(item.percent) }}%
              </div>
            </div>
          </div>
        </div>
        <div class="extend">
          <span v-if="isOpen === false" @click="openmore"
            >展开更多<i class="iconfont iconicon_zhankai"></i
          ></span>
          <span v-else @click="closemore"
            >收起内容<i class="iconfont myicon iconicon_zhankai"></i
          ></span>
        </div>
      </div>
      <!-- 面经分享 -->
      <div class="share">
        <findCell
          title="面经分享"
          @more="$router.push('/shareList')"
        ></findCell>
        <div class="share-list">
          <shareList
            :item="item"
            v-for="(item, index) in shareList"
            :key="index"
          ></shareList>
        </div>
      </div>
    </van-pull-refresh>
  </div>
</template>

<script>
// 导入子组件
import findCell from './findCell.vue'
import skillList from './skillList.vue'
// 导入接口函数
import { getSkill, getHot, getShare } from '../../../api/articles.js'
export default {
  name: 'find',
  components: {
    findCell,
    skillList
  },
  data () {
    return {
      // 面试技巧数据
      skillList: [],
      // 市场数据
      hotList: [],
      city: '',
      position: '',
      topSalary: '',
      showList: [],
      // 控制展开更多是否打开
      isOpen: false,
      // 分享列表
      shareList: [],
      // 刷新状态
      isLoading: false
    }
  },
  methods: {
    // 展开更多
    openmore () {
      this.isOpen = true
      // 将显示的数组长度变为 7
      this.showList = this.hotList
    },
    // 收起内容
    closemore () {
      this.isOpen = false
      // 将显示的数组长度变为 4
      this.showList = this.hotList.slice(0, 4)
    },
    // 刷新方法
    onRefresh () {
      // 清空数据
      this.skillList = []
      this.hotList = []
      this.city = ''
      this.position = ''
      this.topSalary = ''
      this.showList = []
      this.isOpen = false
      this.shareList = []
      // 重新获取数据
      this.getAllInfo()
    },
    async getAllInfo () {
      // 获取面试技巧数据
      const skillRes = await getSkill({ limit: 3 })
      this.skillList = skillRes.data.data.list
      // 获取市场数据
      const dataRes = await getHot()
      // console.log(dataRes)
      this.hotList = dataRes.data.data.yearSalary.reverse()
      this.city = dataRes.data.data.city
      this.position = dataRes.data.data.position
      this.topSalary = dataRes.data.data.topSalary
      this.showList = this.hotList.slice(0, 4)
      // 面经分享数据
      const shareRes = await getShare({ limit: 3 })
      // console.log(shareRes)
      this.shareList = shareRes.data.data.list
      // 更新刷新状态
      this.isLoading = false
    }
  },
  async created () {
    this.getAllInfo()
  },
  // 缓存页面钩子函数
  // 缓存页面打开时
  activated () {
    window.console.log('activated')
    window.scrollTo(0, this.$route.meta.scrollTop)
  },
  deactivated () {
    // console.log('缓存页面关闭了')
  }
}
</script>

<style lang="less" scoped>
.find-contain {
  background-color: #f7f4f5;
  padding-bottom: 70px;
  .skill {
    background-color: #fff;
    margin-top: 5px;
  }
  .data {
    margin-top: 10px;
    background-color: #fff;
    .tags {
      padding: 20px 15px 20px;
      display: flex;
      // flex-wrap: wrap;
      .tag {
        font-size: 14px;
        background-color: #eceaea;
        padding: 4px 8px;
        margin-left: 10px;
      }
    }
    .data-list {
      .item {
        display: flex;
        align-items: center;
        padding: 10px 15px;
        .left {
          font-size: 14px;
        }
        .center {
          flex: 1;
          font-size: 12px;
          background-color: #ebdfdf;
          border-radius: 10px;
          margin: 0 10px;
          .content {
            background-color: tomato;
            border-radius: 10px;
            text-align: right;
            color: #fff;
            padding-right: 10px;
          }
        }
        .right {
          font-size: 16px;
          width: 55px;
        }
      }
    }
    .extend {
      padding-bottom: 20px;
      margin-top: 13px;
      font-size: 14px;
      text-align: center;
      i {
        margin-left: 3px;
      }
      .myicon {
        display: inline-block;
        transform: rotate(180deg);
      }
    }
  }
  .share {
    margin-top: 10px;
    background-color: #fff;
    padding: 15px;
    .share-list {
      margin-top: 10px;
    }
  }
}
</style>
